<template>
    <el-form :inline="true" class="search-form">
      <el-form-item v-for="item in searchConfig" :key="item.field" :label="item.label">
        <!-- 输入框类型 -->
        <el-input 
          v-if="item.type === 'input'"
          v-model="searchData[item.field]"
          :placeholder="item.placeholder"
        />
        <!-- 选择框类型 -->
        <el-select
          v-if="item.type === 'select'"
          v-model="searchData[item.field]"
          :placeholder="item.placeholder"
          style="width: 180px"
        >
          <el-option
            v-for="option in item.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script setup>
  import { reactive } from 'vue'
  defineOptions({
    name:"Search"
  })

  const props = defineProps({
    searchConfig: {
      type: Array,
      required: true
    }
  })
  
  const emit = defineEmits(['search', 'reset'])
  
  // 根据配置初始化搜索数据
  const initSearchData = () => {
    const data = {}
    props.searchConfig.forEach(item => {
      data[item.field] = ''
    })
    return data
  }
  
  const searchData = reactive(initSearchData())
  
  const handleSearch = () => {
    emit('search', { ...searchData })
  }
  
  const handleReset = () => {
    Object.keys(searchData).forEach(key => {
      searchData[key] = ''
    })
    emit('reset')
  }
  </script>
  
  <style scoped>
  .search-form {
    margin-bottom: 20px;
  }
  </style>